<template>
  <el-dialog v-model="visible" title="企业微信AI坐席配置" width="500" destroy-on-close>
    <el-form ref="formRef" :rules="rules" :model="form" label-width="80px">
      <el-form-item prop="name" label="名称">
        <el-input v-model="form.name" :disabled="type === 'detail'" autocomplete="off" clearable />
      </el-form-item>
      <el-form-item prop="guid" label="guid">
        <el-input v-model="form.guid" :disabled="type === 'detail'" autocomplete="off" clearable />
      </el-form-item>
      <el-form-item prop="appKey" label="appKey">
        <el-input
          v-model="form.appKey"
          :disabled="type === 'detail'"
          autocomplete="off"
          clearable
        />
      </el-form-item>
      <el-form-item prop="appSecret" label="appSecret">
        <el-input
          v-model="form.appSecret"
          :disabled="type === 'detail'"
          autocomplete="off"
          clearable
        />
      </el-form-item>
      <el-form-item prop="url" label="url">
        <el-input v-model="form.url" :disabled="type === 'detail'" autocomplete="off" clearable />
      </el-form-item>
      <el-form-item prop="callback" label="callback">
        <el-input
          v-model="form.callback"
          :disabled="type === 'detail'"
          autocomplete="off"
          clearable
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">关闭</el-button>
        <el-button type="primary" @click="submitForm(0)" v-if="type === 'add'">保存</el-button>
        <el-button type="primary" @click="submitForm(1)" v-if="type === 'edit'">更新</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useMessage } from '@/hooks/web/useMessage'
import { createWeWorkB2C, updateWeWorkB2C } from './api'

const emit = defineEmits(['close', 'save', 'update'])
const message = useMessage()
const visible = ref(false)
const loading = ref(false)
const form = ref({
  id: '',
  name: '',
  guid: '',
  appKey: '',
  appSecret: '',
  url: 'https://boss.zjxyzk.cn',
  callback: undefined
})
const type = ref('add')
const formRef = ref()
const rules = ref({
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  guid: [{ required: true, message: '请输入guid', trigger: 'blur' }],
  appKey: [{ required: true, message: '请输入appKey', trigger: 'blur' }],
  appSecret: [{ required: true, message: '请输入appSecret', trigger: 'blur' }],
  url: [{ required: true, message: '请输入url', trigger: 'blur' }],
  callback: [{ required: true, message: '请输入callback', trigger: 'blur' }]
})

const open = (formType: string, data: any) => {
  visible.value = true
  type.value = formType
  form.value = data
  if (formType === 'add') {
    rules.value.callback = [{ required: true, message: '请输入callback', trigger: 'blur' }]
  } else {
    rules.value.callback = [{ required: false, message: '请输入callback', trigger: 'blur' }]
  }
  if (formType === 'edit') {
    form.value.callback = undefined
  }
}

const close = () => {
  visible.value = false
  emit('close')
}

const submitForm = (type: number) => {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      loading.value = true
      if (type) {
        updateWeWorkB2C(form.value)
          .then(() => {
            loading.value = false
            message.success('更新成功')
            emit('update')
            visible.value = false
          })
          .catch(() => {
            loading.value = false
          })
      } else {
        createWeWorkB2C(form.value)
          .then(() => {
            loading.value = false
            message.success('保存成功')
            emit('save')
            visible.value = false
          })
          .catch(() => {
            loading.value = false
          })
      }
    }
  })
}

defineExpose({
  open,
  close
})
</script>
